import { Module } from "vuex";
import { IRootState } from "../types";
import { ILoginState } from "./types";
import { IAccount } from "@/service/login/type";
import {
  accountLoginRequest,
  userInfoRequest,
  userMenuInfoRequest,
} from "@/service/login/login";
import LocalCache from "@/utils/cache";
import router from "@/router";
import { mapMenusToRoutes, mapMenusToPermission } from "@/utils/map-menus";

const loginModule: Module<ILoginState, IRootState> = {
  namespaced: true,
  state() {
    return {
      token: "",
      userinfo: {},
      menuinfo: [],
      permission: [],
    };
  },
  mutations: {
    // 存储token
    changeToken(state, token: string) {
      state.token = token;
    },
    //存储用户信息
    changeUserInfo(state, userinfo: any) {
      state.userinfo = userinfo;
      // console.log(state.userinfo);
    },
    //存储用户菜单信息
    changeMenuInfo(state, menuinfo: any) {
      state.menuinfo = menuinfo;
      // console.log(state.menuinfo);

      //在这里调用 匹配路由的函数
      const routes = mapMenusToRoutes(menuinfo);
      //将得到的数组，通过遍历加入路由
      routes.forEach((route) => {
        // addroute的方法就是将 route 加入到 '/main' 的children里面
        router.addRoute("main", route);
      });
      const permission = mapMenusToPermission(menuinfo);
      //    console.log(permission);
      state.permission = permission;
    },
  },
  actions: {
    async accountLoginAction({ commit, dispatch }, payload: IAccount) {
      // 实现登录逻辑
      const loginResult = await accountLoginRequest(payload);
      // console.log(loginResult);
      const { id, token } = loginResult.data;
      //使用commit方法调用 mutation 里面的 方法
      commit("changeToken", token);

      //将token 进行本地存储
      LocalCache.setCache("token", token);

      dispatch("getInitDataAction", null, { root: true });

      //请求用户信息
      const userinfoResult = await userInfoRequest(id);
      // console.log(userinfo);
      const userinfo = userinfoResult.data;
      commit("changeUserInfo", userinfo);
      //将userinfo 进行本地存储
      LocalCache.setCache("userinfo", userinfo);

      //获取用户的菜单信息
      const userMenuResult = await userMenuInfoRequest(userinfo.role.id);
      // console.log( userMenuResult );
      const userMenu = userMenuResult.data;
      commit("changeMenuInfo", userMenu);
      LocalCache.setCache("userMenu", userMenu);

      //跳转到首页
      router.push("/main");
    },
    loadLocalLogin({ commit ,dispatch}) {
      const token = LocalCache.getCache("token");
      dispatch("getInitDataAction", null, { root: true });
      if (token) {
        commit("changeToken", token);
        // console.log('1122')
      }
      //刷新之后获取用户信息
      const userinfo = LocalCache.getCache("userinfo");
      // console.log(userinfo);

      if (userinfo) {
        commit("changeUserInfo", userinfo);
      }
      // 刷新之后再vuex里面添加数据
      const menuinfo = LocalCache.getCache("userMenu");

      if (menuinfo) {
        commit("changeMenuInfo", menuinfo);
        // console.log(menuinfo);
      }
    },
  },
};

export default loginModule;
